<template>
  <div class="detail-page">
    <el-page-header  @back="$router.back()" />

    <el-card v-if="detail" class="mt-4">
      <template #header>基础信息</template>
      <p>订单号：{{ detail.orderBasic.orderNo }}</p>
      <p>下单时间：{{ detail.orderBasic.orderTime }}</p>
      <!-- …更多字段… -->
    </el-card>

    <el-empty v-else description="加载中…" />
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getOrderDetail } from '@/api/order'   // ← 确保已实现 export

/* 路由参数 */
const route = useRoute()
const id = ref(route.params.id)        // 保证响应式

/* 数据与状态 */
const detail   = ref(null)
const loading  = ref(false)
const errorMsg = ref('')

/* 配送状态字典 */
const statusText = {
  1: '待骑手接单',  2: '配送中', 3: '已送达', 4: '配送超时',
  5: '待商家退款',  6: '商家拒绝退款', 7: '商家成功退款',
  8: '交易成功',    9: '交易关闭'
}

/* 核心：拉取订单详情 */
async function fetchDetail (orderId) {
  loading.value  = true
  detail.value   = null
  errorMsg.value = ''
  try {
    const resp = await getOrderDetail(orderId)
    detail.value = resp.data          // 后端 AjaxResult.success(data)
  } catch (err) {
    errorMsg.value = err?.msg || '加载失败'
    ElMessage.error(errorMsg.value)
  } finally {
    loading.value = false
  }
}

/* 首次进入页面拉数据 */
onMounted(() => fetchDetail(id.value))

/* 若同一个组件复用，监听路由参数变化自动刷新 */
watch(
  () => route.params.id,
  newId => {
    id.value = newId
    fetchDetail(newId)
  }
)
</script>
